<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{{ url_for('static', path='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-grid.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-reboot.rtl.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', path='css/bootstrap-utilities.rtl.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', path='js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.esm.min.js') }}"></script>
    <script src="{{ url_for('static', path='js/bootstrap.min.js') }}"></script>
</head>
<body data-bs-theme="dark">
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
            <div class="form-check form-switch">
                <input onchange="switch_theme(this)" class="form-check-input" type="checkbox" role="switch"
                       id="flexSwitchCheckChecked" checked>
                <label class="form-check-label" for="flexSwitchCheckChecked">暗黑模式</label>
            </div>
        </div>
    </nav>
    <div class="card">
        <div class="card-header">
            <div class="row title">

            </div>
            <button type="button" class="btn btn-outline-secondary form-control prev_url mt-2"
                    onclick="get_next(this)">
                上一章
            </button>
            <button type="button" class="btn btn-outline-secondary form-control next_url mt-2"
                    onclick="get_next(this)">
                下一章
            </button>
        </div>
        <div class="card-body"></div>
        <div class="card-footer">
            <button type="button" class="btn btn-outline-secondary form-control prev_url mt-2"
                    onclick="get_next(this)">
                上一章
            </button>
            <button type="button" class="btn btn-outline-secondary form-control next_url mt-2"
                    onclick="get_next(this)">
                下一章
            </button>
        </div>
    </div>
</div>
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="my_toast">
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>
</body>
<script>
    function fill_data(data) {
        document.querySelector("title").innerText = `第${data.chapter_index}章 ${data.title}`
        document.querySelector('.card-header .title').innerText = `第${data.chapter_index}章 ${data.title}`
        document.querySelector('.card-body').innerHTML = data.content_html.replaceAll("<br/>","")
        document.querySelectorAll('.next_url').forEach((e) => {
            e.setAttribute('data-value', data.next_index)
        })
        if (data.next_index === "") {
            document.querySelectorAll('.prev_url').forEach((e) => {
                disabled(e)
            })
        } else {
            document.querySelectorAll('.prev_url').forEach((e) => {
                enabled(e)
                e.setAttribute('data-value', data.prev_index)
            })
        }
        window.scrollTo(0, 0);
    }

    function disabled(e) {
        let class_array = e.className.split(" ")
        class_array.push("disabled")
        e.className = class_array.join(" ")
    }

    function enabled(e) {
        let class_array = e.className.split(" ")
        class_array = class_array.filter(item => item !== "disabled")
        e.className = class_array.join(" ")
    }

    fetch('/ebooks/api/zhanshen').then(resp => resp.json()).then(data => {
        fill_data(data.data)
    })

    function get_next(e) {
        let next_url = e.getAttribute('data-value')
        if (!next_url) return
        fetch(`/ebooks/api/zhanshen?chapter_index=${next_url}`).then(resp => resp.json()).then(data => {
            fill_data(data.data)
        })
    }

    function switch_theme(e) {
        let body = document.querySelector("body")
        e.checked ? body.setAttribute('data-bs-theme', "dark") : body.setAttribute('data-bs-theme', "light")
    }
</script>
</html>